<template>
  <div>
    <template v-if='(!menu.children || !menu.children.length || menu.children.length===0)'>
      <el-menu-item :index='menu.id'>
        <i class='el-icon-document'/>&nbsp;
        <span slot="title">{{ menu.name }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu :index="menu.id">
        <template slot='title'>
          <i class='el-icon-menu'/>&nbsp;
          <span >{{ menu.name }}</span>
        </template>
        <template v-for='child of menu.children'>
          <menu_tree :key='child.id' :menu='child'/>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'menu_tree',
  props: {
    menu: Object,
    default () {
      return {}
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
